<mat-card style="margin-top: 40px; background-color: #f0f0f0; font-size: 28px">
    <span>我的帐号</span>
    <button mat-icon-button (click)="goBack()" matTooltip="返回" style="float: right">
        <mat-icon color="primary">arrow_back</mat-icon>
    </button>
</mat-card>

<mat-card>
    <mat-vertical-stepper [linear]="true">
        <mat-step>
            <ng-template matStepLabel>基本信息</ng-template>
            <form [formGroup]="formGroup1">
                <div class="row">
                    <div class="col">
                        <mat-form-field style="width: 100%">
                            <input matInput formControlName="login" type="text" placeholder="用户帐号">
                        </mat-form-field>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <mat-form-field style="width: 100%">
                            <input matInput formControlName="fullName" type="text" placeholder="真实姓名" maxlength="50">
                            <mat-error *ngIf="(fullName.dirty || fullName.touched) && fullName.hasError('maxlength')">
                                姓名长度不能超过50个字符！
                            </mat-error>
                        </mat-form-field>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <mat-form-field style="width: 100%">
                            <input matInput formControlName="email" type="email" placeholder="电子邮箱" maxlength="50">
                            <mat-error *ngIf="(email.dirty || email.touched) && email.hasError('required')">
                                必须输入电子邮箱地址！
                            </mat-error>
                            <mat-error *ngIf="(email.dirty || email.touched) && email.hasError('email')">
                                电子邮箱地址无效！
                            </mat-error>
                            <mat-error *ngIf="(email.dirty || email.touched) && email.hasError('maxlength')">
                                本字段长度不能超过50个字符！
                            </mat-error>
                            <mat-error *ngIf="(email.dirty || email.touched) && email.hasError('minlength')">
                                本字段长度最少5个字符！
                            </mat-error>
                            <mat-error *ngIf="email.hasError('unique')">
                                该email已存在，请另外选择一个！
                            </mat-error>
                            <mat-error *ngIf="email.pending">
                                正在验证唯一性......
                            </mat-error>
                        </mat-form-field>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <mat-form-field style="width: 100%">
                            <input matInput formControlName="phone" type="tel" placeholder="手机号码"
                                   minlength=5 maxlength="20" pattern="^[0-9]*$">
                            <mat-error *ngIf="(phone.dirty || phone.touched) && phone.hasError('required')">
                                必须输入电话号码！
                            </mat-error>
                            <mat-error *ngIf="(phone.dirty || phone.touched) && phone.hasError('maxlength')">
                                本字段长度不能超过20个字符！
                            </mat-error>
                            <mat-error *ngIf="(phone.dirty || phone.touched) && phone.hasError('minlength')">
                                本字段长度最少5个字符！
                            </mat-error>
                            <mat-error *ngIf="(phone.dirty || phone.touched) && phone.hasError('pattern')">
                                手机号码只能包含数字！
                            </mat-error>
                            <mat-error *ngIf="phone.hasError('unique')">
                                该号码已存在，请另外选择一个！
                            </mat-error>
                            <mat-error *ngIf="phone.pending">
                                正在验证唯一性......
                            </mat-error>
                        </mat-form-field>
                    </div>
                </div>
                <button mat-raised-button color="primary" (click)="onSubmit()" [disabled]="formGroup1.invalid || !formGroup1.dirty">
                    <span class="fa fa-check-circle">&nbsp;更新</span>
                </button>
            </form>
        </mat-step>
        <mat-step>
            <ng-template matStepLabel>修改密码</ng-template>
            <form [formGroup]="formGroup2">
                <div>
                    <mat-form-field style="width: 100%">
                        <input matInput formControlName="password" type="password" placeholder="新密码" (change)="confirmPassword.setValue('')">
                        <mat-error *ngIf="password.value && password.hasError('passwordStrong')">
                            {{password.errors.passwordStrong.value}}
                        </mat-error>
                    </mat-form-field>
                </div>
                <div>
                    <mat-form-field style="width: 100%">
                        <input matInput formControlName="confirmPassword" type="password" placeholder="再次输入新密码">
                        <mat-error *ngIf="confirmPassword.value && confirmPassword.hasError('passwordMatch')">
                            {{confirmPassword.errors.passwordMatch.value}}
                        </mat-error>
                    </mat-form-field>
                </div>
                <button mat-raised-button color="primary" (click)="onChangePassword()" [disabled]="formGroup2.invalid">
                    <span class="fa fa-check-circle">&nbsp;修改密码</span>
                </button>
            </form>
        </mat-step>
    </mat-vertical-stepper>
</mat-card>





